<template>
    <div class="todayContainer">
        <div class="content">
            <p class="title">早·碳水 蛋白质 纤维素</p>
            <ul class="morning">
                <li v-for="food in foods" :key="food.id">
                    <div class="foods" :style="food.isShow ? 'opacity:0.5' : 'opacity:1'">
                        <div class="foodImg" :style="{backgroundImage:'url('+backImg(food)+')'}"></div>
                        <div class="nameAndNumber">
                            <p class="name" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.name }}</p>
                            <p class="number" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.number }}</p>
                        </div>
                        <p class="calorie">约{{ food.calorie }}卡</p>
                        <div class="check" v-if="!food.isShow" @click="food.isShow=!food.isShow"></div>
                        <div class="isCheck" v-if="food.isShow" @click="food.isShow=!food.isShow"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content">
            <p class="title">午·碳水 蛋白质 纤维素 脂肪</p>
            <ul class="morning">
                <li v-for="food in noonFoods" :key="food.id">
                    <div class="foods" :style="food.isShow ? 'opacity:0.5' : 'opacity:1'">
                        <div class="foodImg" :style="{backgroundImage:'url('+backImg(food)+')'}"></div>
                        <div class="nameAndNumber">
                            <p class="name" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.name }}</p>
                            <p class="number" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.number }}</p>
                        </div>
                        <p class="calorie">约{{ food.calorie }}卡</p>
                        <div class="check" v-if="!food.isShow" @click="food.isShow=!food.isShow"></div>
                        <div class="isCheck" v-if="food.isShow" @click="food.isShow=!food.isShow"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content">
            <p class="title">晚· 蛋白质 纤维素</p>
            <ul class="morning">
                <li v-for="food in eveningFoods" :key="food.id">
                    <div class="foods" :style="food.isShow ? 'opacity:0.5' : 'opacity:1'">
                        <div class="foodImg" :style="{backgroundImage:'url('+backImg(food)+')'}"></div>
                        <div class="nameAndNumber">
                            <p class="name" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.name }}</p>
                            <p class="number" :style="food.isShow ? 'text-decoration: line-through' : 'text-decoration: none'">{{ food.number }}</p>
                        </div>
                        <p class="calorie">约{{ food.calorie }}卡</p>
                        <div class="check" v-if="!food.isShow" @click="food.isShow=!food.isShow"></div>
                        <div class="isCheck" v-if="food.isShow" @click="food.isShow=!food.isShow"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'foodToday',
        data(){
            return{
                foods:[
                        {id:'1-7carton',name:'粗粮',number:'300g',calorie:300,isShow:false},
                        {id:'1-9egg',name:'鸡蛋',number:'1个',calorie:85,isShow:false},
                        {id:'1-8huanggua',name:'黄瓜',number:'1根',calorie:70,isShow:false}
                ],
                noonFoods:[
                    {id:'1-7carton',name:'粗粮',number:'90g',calorie:300,isShow:false},
                    {id:'1-10chicken',name:'炒鸡胸肉',number:'90g',calorie:200,isShow:false},
                    {id:'1-11comfortable',name:'绿色蔬菜',number:'若干',calorie:70,isShow:false},
                    {id:'1-12lanmei',name:'蓝莓',number:'10g',calorie:70,isShow:false}
                ],
                eveningFoods:[
                    {id:'1-11comfortable',name:'绿色蔬菜',number:'若干',calorie:70,isShow:false}
                ]
            }
        },
        computed:{
            backImg(){
                return (food) =>{
                    return require(`../assets/img/1-icon@2x/${food.id}icon.png`)
                }
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .todayContainer{
        width: 100%;
        padding-bottom: 2rem;
    }
    .content{
        margin-left: .32rem;
        margin-top: .4rem;
    }
    .title{
        font-size: .35rem;
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
    }
    .morning{
        width: 6.86rem;
        margin-top: .4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .foods{
        background-color: #FFF;
        width: 6.86rem;
        height: 1.5rem;
        border-radius: .2rem;
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
        transition: all 0.5s;
    }
    .foodImg{
        width: 1.2rem;
        height: 1.2rem;
        background-position: center;
        background-size: contain;
        margin-left: .15rem;
    }
    .nameAndNumber{
        font-size: .32rem;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        display: flex;
        align-items: center;
        margin-left: .4rem;
    }
    .number{
        margin-left: .1rem;
        transition: all 0.5s;
    }
    .calorie{
        color:#3333337f;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
        position: absolute;
        right:1rem;
    }
    .check{
        background-image: url(../assets/img/1-icon@2x/1-13check.png);
        width: 0.48rem;
        height: 0.48rem;
        background-position: center;
        background-size: contain;
        position: absolute;
        right: .1rem;
    }
    .isCheck{
        background-image: url(../assets/img/1-icon@2x/1-14isCheck.png);
        width: 0.48rem;
        height: 0.48rem;
        background-position: center;
        background-size: contain;
        position: absolute;
        right: .1rem;
    }
</style>